<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
          name="viewport">
    <title>风间网盘-我的文件</title>
    <link rel="shortcut icon" href="/static/img/yun.png"/>
    <link rel="stylesheet" href="/static/u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/u-admin/dist/modules/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
          href="/static/u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

    <link rel="stylesheet" href="/static/u-admin/dist/modules/summernote/summernote-lite.css">
    <link rel="stylesheet" href="/static/u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="/static/u-admin/dist/css/demo.css">
    <link rel="stylesheet" href="/static/u-admin/dist/css/style.css">
    <link rel="stylesheet" href="/static/plug-ins/xcConfirm/css/xcConfirm.css">
    <link rel="stylesheet" href="/static/plug-ins/context-menu/css/contextMenu.css">
    <style>
        .files-items {
            margin-top: -20px;
            border-bottom: 1px dashed #bdc3c7;
            border-top: 1px dashed #bdc3c7;
        }

        .files-items:hover {
            background: #F4FBFF;
        }
    </style>

</head>

<body>
<div id="app">
    <div class="main-wrapper">
        <div class="navbar-bg"></div>
        {{template "menu-top" .}}
        {{template "menu-sidebar" .}}
        <div class="main-content" style="min-height: 627px;">
            <section class="section">
                <h1 class="section-header">
                    <div><i class="ion ion-folder"></i> 全部文件 <span style="color: red;font-size: 14px"></span></div>
                </h1>
                <div class="row">
                    <div class="col-12 col-sm-12 col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <nav aria-label="breadcrumb" class="empty-space">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">
                                            <a href="/cloud/files?fId={{.fId}}&fName={{.fName}}" title="刷新">
                                                <i class="icon ion-refresh"></i>
                                            </a>
                                        </li>
                                        <li class="breadcrumb-item active">
                                            {{if eq .fId 0}}
                                                <span>根目录 &nbsp /</span>
                                            {{else}}
                                                <a style="font-weight: bold" href="/cloud/files">根目录</a>
                                            {{end}}
                                        </li>

                                        {{range .currentAllParent}}
                                            <li class="breadcrumb-item">
                                                <a style="font-weight: bold"
                                                   href="/cloud/files?fId={{.Id}}&fName={{.FileFolderName}}">
                                                    {{.FileFolderName}}
                                                </a>
                                            </li>
                                        {{end}}

                                        {{if ne .fId 0}}
                                            <li class="breadcrumb-item action" aria-current="page">
                                                {{.fName}}
                                            </li>
                                        {{end}}

                                        {{if ne .fId 0}}
                                            <li class="breadcrumb-item">
                                                <a href="/cloud/files?fId={{.parentFolder.ParentFolderId}}"
                                                   title="返回上一层">
                                                    <i class="icon ion-arrow-return-left"></i>
                                                </a>
                                            </li>
                                        {{end}}
                                    </ol>
                                </nav>
                                <div class="row" style="margin-top: -10px;">
                                    <div class="col-12 col-sm-12 col-lg-12 table-responsive">
                                        <table class="table tab-bordered text-nowrap" id="files-table">
                                            <tr id="files-table-title" class="empty-space">
                                                <th></th>
                                                <th>名称</th>
                                                <th>类型</th>
                                                <th>扩展名</th>
                                                <th>大小</th>
                                                <th>下载次数</th>
                                                <th>上传时间</th>
                                            </tr>

                                            {{range .fileFolder}}
                                                <tr class="files-items folders">
                                                    <td>
                                                        <span style="display: none">{{.Id}}</span>
                                                        <i style="font-size: 24px;color: orange"
                                                           class="icon ion-android-folder"></i>
                                                    </td>
                                                    <td>
                                                        <a href="/cloud/files?fId={{.Id}}&fName={{.FileFolderName}}"
                                                           style="font-weight: 700;color: black">
                                                            {{.FileFolderName}}
                                                        </a>
                                                    </td>
                                                    <td style="font-weight: 300">文件夹</td>
                                                    <td style="font-weight: 300">-</td>
                                                    <td style="font-weight: 300">-</td>
                                                    <td style="font-weight: 300">-</td>
                                                    <td style="font-weight: 300">
                                                        {{.Time}}
                                                    </td>
                                                </tr>
                                            {{end}}
                                            {{range .files}}
                                                <tr class="files-items files">
                                                    <td><span style="display: none">{{.Id}}</span>
                                                        {{if eq .Type 1}}
                                                            <i style="font-size: 24px;color: #3498db"
                                                               class="icon ion-document-text"></i>
                                                        {{end}}

                                                        {{if eq .Type 2}}
                                                            <i style="font-size: 24px;color: #28a745"
                                                               class="icon ion-image"></i>
                                                        {{end}}

                                                        {{if eq .Type 3}}
                                                            <i style="font-size: 24px;color: #FFC107"
                                                               class="icon ion-ios-videocam"></i>
                                                        {{end}}

                                                        {{if eq .Type 4}}
                                                            <i style="font-size: 24px;color: #dc3545"
                                                               class="icon ion-ios-musical-notes"></i>
                                                        {{end}}

                                                        {{if eq .Type 5}}
                                                            <i style="font-size: 24px;color: #343A40"
                                                               class="icon ion-document"></i>
                                                        {{end}}
                                                    </td>
                                                    <td>
                                                        <a href="/cloud/downloadFile?fId={{.Id}}"
                                                           style="font-weight: 700;color: black">{{.FileName}}</a>
                                                    </td>
                                                    {{if eq .Type 1}}
                                                        <td style="font-weight: 300">文档</td>
                                                    {{end}}

                                                    {{if eq .Type 2}}
                                                        <td style="font-weight: 300">图像</td>
                                                    {{end}}

                                                    {{if eq .Type 3}}
                                                        <td style="font-weight: 300">视频</td>
                                                    {{end}}

                                                    {{if eq .Type 4}}
                                                        <td style="font-weight: 300">音乐</td>
                                                    {{end}}

                                                    {{if eq .Type 5}}
                                                        <td style="font-weight: 300">其他</td>
                                                    {{end}}

                                                    <td style="font-weight: 300">{{.Postfix}}</td>


                                                    <td style="font-weight: 300">{{.SizeStr }}</td>


                                                    <td style="font-weight: 300">{{.DownloadNum}}次</td>
                                                    <td style="font-weight: 300">{{.UploadTime}}</td>
                                                </tr>
                                            {{end}}
                                        </table>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="float-right">
                                            <a href="javaScript:addFolderElement()"
                                               class="btn btn-sm btn-outline-success"><i class="icon ion-plus"></i>
                                                创建文件夹</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <span id="nowF" style="display: none">{{.fId}}</span>
                <span id="preF" style="display: none">{{.parentFolder.ParentFolderId}}</span>
                <span id="tarFolder" style="display: none"></span>
                <span id="tarFile" style="display: none"></span>
            </section>
        </div>
        {{template "menu-footer"}}
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $('.folders').dblclick(function () {
            let id = $(this).children("td").children("span").html();
            var location = window.location.href;
            let strings = location.split("?");
            if (id != "") {
                window.location.href = strings[0] + "?fId=" + id;
            } else {
                return;
            }
        });
        $('.files').dblclick(function () {
            let id = $(this).children("td").children("span").html();
            var location = window.location.href;
            let strings = location.split("cloud");
            console.log(strings)
            if (id != "") {
                window.location.href = strings[0] + "cloud/downloadFile?time=" + new Date().getTime() + "&tip=" + Math.random() * 1000000 + "&fId=" + id;
            } else {
                return;
            }
        });
        $('.folders').hover(function () {
            let id = $(this).children("td").children("span").html();
            $('#tarFolder').html(id);
            $(this).siblings().removeClass('flag');
            $(this).addClass('flag');
        }, function () {
        });
        $('.files').hover(function () {
            let id = $(this).children("td").children("span").html();
            $('#tarFile').html(id);
            $(this).siblings().removeClass('flag');
            $(this).addClass('flag');
        }, function () {
        });
    });
</script>
<script src="/static/plug-ins/context-menu/js/jquery.contextMenu.min.js"></script>
<script src="/static/plug-ins/xcConfirm/js/xcConfirm.js"></script>
<script>
    $(".files").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [{ // 菜单项
            text: " 下载",
            callback: function () {
                let id = $('#tarFile').html();
                var location = window.location.href;
                let strings = location.split("cloud");
                if (id != "") {
                    window.location.href = strings[0] + "cloud/downloadFile?time=" + new Date().getTime() + "&tip=" + Math.random() * 1000000 + "&fId=" + id;
                } else {
                    return;
                }
            }
        },
            {
                text: " 分享",
                callback: function () {
                    var location = window.location.href;
                    let strings = location.split("cloud");
                    $.ajax({
                        url: "getQrCode?id=" + $('#tarFile').html() + "&url=" + strings[0] + "file/share",
                        type: "POST",
                        async: false,
                        success: function (data) {
                            var txt = "链接：<a>" + data["url"] + "<a/><br/>" +
                            "提取码：<a>"+ data["code"] + "<a/>";
                            var option = {
                                title: "分享你的文件",
                            };
                            window.wxc.xcConfirm(txt, "custom", option);
                        }
                    });
                }
            },
            {
                text: " 重命名",
                callback: function () {
                    let id = $('.flag td span').html();
                    let name = $('.flag td a').html();
                    let html = $('.flag td').eq(1).html($('' +
                        "<form id='updateFileNameForm' action='updateFileName' method='post'>" +
                        "<input id='updateFileName' name='myFileName' autocomplete='off' type='text' onblur='checkUpdateFile()' value='" + name + "'>" +
                        "<input type='hidden' name='myFileId' value='" + id + "'>" +
                        "</form>" +
                        ''));
                }
            },
            {
                text: " 删除",
                callback: function () {
                    let id = $('#tarFile').html();
                    var location = window.location.href;
                    let strings = location.split("cloud");
                    if (id != "") {
                        window.location.href = strings[0] + "cloud/deleteFile?fId=" + id + "&folder=" + $('#nowF').html();
                    } else {
                        return;
                    }
                }
            },
            {
                text: " 在线浏览",
                callback: function () {
                    alert("在线浏览");
                }
            }
        ]

    });
    $(".folders").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [{ // 菜单项
            text: " 打开",
            callback: function () {
                let id = $('#tarFolder').html();
                var location = window.location.href;
                let strings = location.split("?");
                if (id != "") {
                    window.location.href = strings[0] + "?fId=" + id;
                } else {
                    return;
                }
            }
        },
            {
                text: " 返回上一级",
                callback: function () {
                    toPreFolder();
                }
            },
            {
                text: " 重命名",
                callback: function () {
                    let id = $('.flag td span').html();
                    let name = $('.flag td a').html();
                    name = name.replace(/(^\s*)|(\s*$)/g, "");
                    let html = $('.flag td').eq(1).html($('' +
                        "<form id='updateFolderForm' action='updateFolder' method='post'>" +
                        "<input id='updateFolderName' name='fileFolderName' autocomplete='off' type='text' onblur='checkUpdateFolder()' value='" + name + "'>" +
                        "<input type='hidden' name='fileFolderId' value='" + id + "'>" +
                        "</form>" +
                        ''));
                }
            },
            {
                text: " 新建文件夹",
                callback: function () {
                    addFolderElement();
                }
            },
            {
                text: " 清空并删除",
                callback: function () {
                    let id = $('#tarFolder').html();
                    var location = window.location.href;
                    let strings = location.split("cloud");
                    if (id != "") {
                        window.location.href = strings[0] + "cloud/deleteFolder?fId=" + id;
                    } else {
                        return;
                    }
                }
            }
        ]

    });
    $(".empty-space").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [
            {
                text: " 新建文件夹",
                callback: function () {
                    addFolderElement();
                }
            },
            {
                text: " 返回上一级",
                callback: function () {
                    toPreFolder();
                }
            }
        ]

    });

    function toPreFolder() {
        var location = window.location.href;
        let strings = location.split("?");
        var pre = $('#preF').html();
        if (pre != "") {
            window.location.href = strings[0] + "?fId=" + pre;
        } else {
            return;
        }
    }

    function addFolderElement() {
        var now = $('#nowF').html();
        $("<tr class='files-items folders'><td><i style='font-size: 24px;color: orange' class='icon ion-android-folder'></i></td>" +
            "<td>" +
            "<form id='addFolderForm' action='addFolder' method='post'>" +
            "<input id='newFolder'  autocomplete='off' name='fileFolderName' type='text' onblur='checkAddFolder()'>" +
            "<input type='hidden' name='parentFolderId' value='" + now + "'>" +
            "</form>" +
            "</td>" +
            "<td style='font-weight: 300'>文件夹</td>" +
            "<td style='font-weight: 300'>-</td>" +
            "<td style='font-weight: 300'>-</td>" +
            "</tr>").insertAfter($('#files-table-title'));
        $('#newFolder').focus();
    }

    function checkAddFolder() {
        var name = $.trim($("#newFolder").val());
        var nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{1,20}$/;
        if (!nameReg.test(name)) {
            alert("文件夹格式错误！【汉字、字母、数字】");
            var location = window.location.href;
            window.location.href = location;
        } else {
            $('#addFolderForm').submit();
        }
    }

    function checkUpdateFolder() {
        var name = $.trim($("#updateFolderName").val());
        var nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/;
        if (!nameReg.test(name)) {
            alert("文件夹格式错误！【汉字、字母、数字】");
            var location = window.location.href;
            window.location.href = location;
        } else {
            $('#updateFolderForm').submit();
        }
    }

    function checkUpdateFile() {
        var name = $.trim($("#updateFileName").val());
        var nameReg = /^[^\u4E00-\u9FA5\uF900-\uFA2D\w-_]{2,20}$/;
        if (!nameReg.test(name)) {
            alert("文件夹格式错误！【汉字、字母、数字】");
            var location = window.location.href;
            window.location.href = location;
        } else {
            $('#updateFileNameForm').submit();
        }
    }
</script>
<script src="/static/u-admin/dist/modules/jquery.min.js"></script>
<script src="/static/u-admin/dist/modules/popper.js"></script>
<script src="/static/u-admin/dist/modules/tooltip.js"></script>
<script src="/static/u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="/static/u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="/static/u-admin/dist/js/sa-functions.js"></script>

<script src="/static/u-admin/dist/modules/chart.min.js"></script>
<script src="/static/u-admin/dist/modules/summernote/summernote-lite.js"></script>

<script src="/static/u-admin/dist/js/scripts.js"></script>
<script src="/static/u-admin/dist/js/custom.js"></script>
<script src="/static/u-admin/dist/js/demo.js"></script>
</body>
</html>
